<template>
  <view class="order-detail">
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="500">
      <swiper-item v-for="(image, index) in orderImages" :key="index">
        <image class="swiper-image" :src="image" />
      </swiper-item>
    </swiper>
    <view class="order-info">
      <view class="order-info-item">
        <text class="label">订单号:</text>
        <text class="value">{{ orderNumber }}</text>
      </view>
      <view class="order-info-item">
        <text class="label">订单名称:</text>
        <text class="value">{{ orderName }}</text>
      </view>
      <view class="order-info-item">
        <text class="label">金额:</text>
        <text class="value">{{ orderAmount }} 元</text>
      </view>
      <view class="order-info-item">
        <text class="label">数量:</text>
        <text class="value">{{ orderQuantity }}</text>
      </view>
      <view class="order-info-item">
        <text class="label">使用时间:</text>
        <text class="value">{{ useTime }}</text>
      </view>
    </view>

    <view v-if="orderStatus === '未支付'" class="unpaid">
      <text class="status-text">您的订单未支付，等待支付</text>
      <button class="pay-button" @click="handlePay">立即支付</button>
    </view>
    <view v-else-if="orderStatus === '待使用'" class="to-be-used">
      <text class="status-text">您的订单未使用，等待使用</text>
      <button class="use-button" @click="handleUse">立即使用</button>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const orderStatus = ref('待使用'); // 或者 '待使用'
    const orderImages = ref([
      '/static/12.png', // 确保路径正确
      '/static/order2.jpg',
      '/static/order3.jpg'
    ]);
    const orderNumber = ref('20230401001');
    const orderName = ref('浪漫婚纱套餐');
    const orderAmount = ref(9999);
    const orderQuantity = ref(1);
    const useTime = ref('2023-05-01');

    const handlePay = () => {
      // 处理支付逻辑
      console.log('跳转到支付页面');
    };

    const handleUse = () => {
      // 处理查看详情逻辑
      console.log('跳转到订单详情页面');
	  uni.navigateTo({
        url: '/pages/useOrder/useOrder'
      });
    };

    return {
      orderStatus,
      orderImages,
      orderNumber,
      orderName,
      orderAmount,
      orderQuantity,
      useTime,
      handlePay,
      handleUse,
    };
  },
});
</script>

<style scoped>
.order-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f7f7f7;
  padding: 20px;
}

.swiper {
  width: 100%;
  height: 280px;
  margin-bottom: 10px;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.order-info {
  width: 100%;
  margin-bottom: 15px;
}

.order-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.label {
  font-size: 16px;
  color: #333;
}

.value {
  font-size: 16px;
  color: #666;
}

.status-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.status-text {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.pay-button, .use-button {
  width: 200px;
  height: 40px;
  background-color: #ff6699;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  margin-top: 10px;
}

.pay-button:active, .use-button:active {
  background-color: #e65c8c;
}
</style>